{% extends "base.html" %}

{% block title %}目标管理 - 专注时钟{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/goals.css') }}">
{% endblock %}

{% block content %}
<div class="goals-container">
    <div class="goals-header">
        <h2>目标管理</h2>
        <div class="goals-actions">
            <button id="new-goal-btn" class="btn btn-primary">创建新目标</button>
            <div class="goals-filter">
                <select id="category-filter">
                    <option value="">全部类别</option>
                    <option value="work">工作</option>
                    <option value="study">学习</option>
                    <option value="personal">个人</option>
                    <option value="other">其他</option>
                </select>
                <select id="status-filter">
                    <option value="">全部状态</option>
                    <option value="active">进行中</option>
                    <option value="completed">已完成</option>
                </select>
            </div>
        </div>
    </div>

    <div class="goals-tabs">
        <button class="tab-btn active" data-view="list">列表视图</button>
        <button class="tab-btn" data-view="kanban">看板视图</button>
    </div>

    <div class="goals-view-container">
        <!-- 列表视图 -->
        <div id="list-view" class="goals-view active">
            <table class="goals-table">
                <thead>
                    <tr>
                        <th data-sort="name">名称 <span class="sort-icon">↕</span></th>
                        <th data-sort="category">类别 <span class="sort-icon">↕</span></th>
                        <th data-sort="progress">进度 <span class="sort-icon">↕</span></th>
                        <th data-sort="target_time">目标时间 <span class="sort-icon">↕</span></th>
                        <th data-sort="priority">优先级 <span class="sort-icon">↕</span></th>
                        <th data-sort="deadline">截止日期 <span class="sort-icon">↕</span></th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="goals-list">
                    <!-- 目标列表将通过JS动态加载 -->
                </tbody>
            </table>
        </div>

        <!-- 看板视图 -->
        <div id="kanban-view" class="goals-view">
            <div class="kanban-container">
                <div class="kanban-column">
                    <div class="kanban-header">
                        <h3>进行中</h3>
                    </div>
                    <div id="active-goals" class="kanban-items">
                        <!-- 进行中的目标将通过JS动态加载 -->
                    </div>
                </div>
                <div class="kanban-column">
                    <div class="kanban-header">
                        <h3>已完成</h3>
                    </div>
                    <div id="completed-goals" class="kanban-items">
                        <!-- 已完成的目标将通过JS动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建/编辑目标模态框 -->
<div id="goal-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modal-title">创建新目标</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <form id="goal-form">
                <input type="hidden" id="goal-id">
                <div class="form-group">
                    <label for="goal-name">目标名称</label>
                    <input type="text" id="goal-name" required>
                </div>
                <div class="form-group">
                    <label for="goal-description">描述</label>
                    <textarea id="goal-description" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="goal-category">类别</label>
                    <select id="goal-category">
                        <option value="work">工作</option>
                        <option value="study">学习</option>
                        <option value="personal">个人</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="goal-target-time">目标时间（分钟）</label>
                    <input type="number" id="goal-target-time" min="1" required>
                </div>
                <div class="form-group">
                    <label for="goal-priority">优先级</label>
                    <select id="goal-priority">
                        <option value="high">高</option>
                        <option value="medium" selected>中</option>
                        <option value="low">低</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="goal-deadline">截止日期（可选）</label>
                    <input type="date" id="goal-deadline">
                </div>
                <div class="form-group">
                    <label for="goal-tags">标签（用逗号分隔）</label>
                    <input type="text" id="goal-tags" placeholder="例如: 工作,重要,项目A">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button id="save-goal-btn" class="btn btn-primary">保存</button>
            <button class="btn btn-secondary close-modal">取消</button>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div id="confirm-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>确认删除</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <p>您确定要删除此目标吗？此操作无法撤销。</p>
        </div>
        <div class="modal-footer">
            <button id="confirm-delete-btn" class="btn btn-danger">删除</button>
            <button class="btn btn-secondary close-modal">取消</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/goals.js') }}"></script>
{% endblock %} 